<template>
  <div style="margin-bottom: 30px">
    <Table
      :columns="tableColumns"
      :data="uploadedMusic"
      style="background: transparent; margin-top: 20px"
      border
      size="small"
      ref="table">
    </Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="display: flex; justify-content: space-between">
        <div>
          <Button type="primary" size="default" @click="exportData(1)">
            <Icon type="ios-download-outline"></Icon>
            导出源数据
          </Button>
          <Button type="primary" size="default" @click="exportData(2)" style="margin: auto 10px">
            <Icon type="ios-download-outline"></Icon>
            导出排序或过滤数据
          </Button>
          <Button type="primary" size="default" @click="exportData(3)">
            <Icon type="ios-download-outline"></Icon>
            导出自定义数据
          </Button>
        </div>
        <Page :total="100" :current="1" @on-change="changePage"></Page>
      </div>
    </div>

    <Modal
      v-model="publishState"
      :width="750"
      @on-ok="apply"
      @on-cacel="reset"
      :ok-text="type === 0 ? '提交许可发布申请' : '提交转让发布申请'"
      cancel-text="取消"
    >
      <Form
        style="margin-top: 20px"
        label-position="right"
        :label-width="150"
        ref="formInfo">
        <FormItem label="发布类型：" style="margin-bottom: 10px">
          <Button size="small" class="mar-left-10 mar-right-10" style="width: 80px"
                  @click="type = 0"
                  :type="type === 0 ? 'primary' : 'default'"
          >许可
          </Button>
          <Button size="small" class="mar-left-10 mar-right-10" style="width: 80px"
                  @click="type = 1"
                  :type="type === 1 ? 'primary' : 'default'"
          >转让
          </Button>
          <Tooltip placement="right" content="发布何种类型的权利">
            <Icon type="ios-help-circle"/>
          </Tooltip>
        </FormItem>

        <!-- 许可-->
        <div v-if="type === 0">
          <FormItem label="授权种类：" style="margin-bottom: 10px" :required="true">
            <CheckboxGroup v-model="authorizeData.allowType">
              <Checkbox label="复制权"></Checkbox>
              <Checkbox label="发行权"></Checkbox>
              <Checkbox label="出租权"></Checkbox>
              <Checkbox label="展览权"></Checkbox>
              <Checkbox label="表演权"></Checkbox>
              <Checkbox label="放映权"></Checkbox>
              <Checkbox label="广播权"></Checkbox>
              <Checkbox label="摄制权"></Checkbox>
              <Checkbox label="改编权"></Checkbox>
              <Checkbox label="汇编权"></Checkbox>
              <Checkbox label="翻译权"></Checkbox>
              <Checkbox label="信息网络传播权"></Checkbox>
              <Tooltip placement="right" content="您想发布何种种类的权利">
                <Icon type="ios-help-circle"/>
              </Tooltip>
            </CheckboxGroup>
          </FormItem>

          <FormItem label="分发时间：" style="margin-bottom: 10px" :required="true">
            <Row>
              <Col span="10">
                <DatePicker type="date" placeholder="开始时间" style="height: 20px"
                            :disabled="true"
                            format="yyyy-MM-dd"
                            :value="authorizeData.authorizationStartTime"></DatePicker>
              </Col>
              <Col span="2" style="text-align: center; margin-top: 3px">至</Col>
              <Col span="10">
                <DatePicker type="date" placeholder="结束时间"
                            style="height: 20px"
                            :options="options1"
                            format="yyyy-MM-dd"
                            @on-change="res => {authorizeData.authorizationEndTime = res}"></DatePicker>
              </Col>
            </Row>
          </FormItem>
          <FormItem label="是否允许永久授权：" style="margin-bottom: 10px" :required="true">
            <RadioGroup v-model="authorizeData.isPerpetual">
              <Radio :label="0">是</Radio>
              <Radio :label="1">否</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="授权地域：" style="margin-bottom: 10px" :required="true">
            <RadioGroup v-model="authorizeData.allowRegion">
              <Radio :label="0">国内
              </Radio>
              <Radio :label="1">海外
              </Radio>
              <Radio :label="2">全球</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="授权单价：" style="margin-bottom: 10px" :required="true">
            <Input v-model="authorizeData.pricePerDay " style="width: 100px"/><span
            style="margin-left: 10px">元 /天/单项福利</span>
          </FormItem>
          <FormItem label="永久授权单价：" style="margin-bottom: 10px" :required="true">
            <Input v-model="authorizeData.perpetualPrice" style="width: 100px"/><span
            style="margin-left: 10px">元 /每项权利</span>
          </FormItem>
        </div>

        <!-- transfer-->
        <div v-else>
          <FormItem label="授权种类：" style="margin-bottom: 10px" :required="true">
            <CheckboxGroup>
              <Checkbox label="复制权"></Checkbox>
              <Checkbox label="发行权"></Checkbox>
              <Checkbox label="出租权"></Checkbox>
              <Checkbox label="展览权"></Checkbox>
              <Checkbox label="表演权"></Checkbox>
              <Checkbox label="放映权"></Checkbox>
              <Checkbox label="广播权"></Checkbox>
              <Checkbox label="摄制权"></Checkbox>
              <Checkbox label="改编权"></Checkbox>
              <Checkbox label="汇编权"></Checkbox>
              <Checkbox label="翻译权"></Checkbox>
              <Checkbox label="信息网络传播权"></Checkbox>
              <Tooltip placement="right" content="您想发布何种种类的权利">
                <Icon type="ios-help-circle"/>
              </Tooltip>
            </CheckboxGroup>
          </FormItem>
          <FormItem label="分发时间：" style="margin-bottom: 10px" :required="true">
            <Row>
              <Col span="10">
                <DatePicker type="date" placeholder="开始时间" style="height: 20px"
                            :disabled="true"
                            format="yyyy-MM-dd"
                            :value="transferData.authorizationStartTime"></DatePicker>
              </Col>
              <Col span="2" style="text-align: center; margin-top: 3px">至</Col>
              <Col span="10">
                <DatePicker type="date" placeholder="结束时间"
                            style="height: 20px"
                            :options="options2"
                            format="yyyy-MM-dd"
                            @on-change="res => {transferData.authorizationEndTime = res}"></DatePicker>
              </Col>
            </Row>
          </FormItem>

          <FormItem label="是否允许永久授权：" style="margin-bottom: 10px" :required="true">
            <RadioGroup v-model="transferData.isPerpetual">
              <Radio :label="0">是</Radio>
              <Radio :label="1">否</Radio>
            </RadioGroup>
          </FormItem>

          <FormItem label="授权地域：" style="margin-bottom: 10px" :required="true">
            <RadioGroup v-model="transferData.allowRegion">
              <Radio :label="0">国内
              </Radio>
              <Radio label="1">海外
              </Radio>
              <Radio :label="2">全球</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="授权单价：" style="margin-bottom: 10px" :required="true">
            <Input v-model="transferData.pricePerDay" style="width: 100px"/><span
            style="margin-left: 10px">元 /天/单项福利</span>
          </FormItem>
          <FormItem label="永久授权单价：" style="margin-bottom: 10px" :required="true">
            <Input v-model="transferData.perpetualPrice" style="width: 100px"/><span
            style="margin-left: 10px">元 /每项权利</span>
          </FormItem>
        </div>
      </Form>
    </Modal>
  </div>
</template>

<script>
import { today } from '@/common/utils'

export default {
  name: 'MyMusicTable',
  data () {
    return {
      publishState: false,
      type: 0, // 记住用户选择了什么类型的授权类型
      applyIndex: null,
      authorizeData: {
        allowType: [],
        authorizationStartTime: today(),
        authorizationEndTime: null,
        allowRegion: null,
        pricePerDay: null,
        perpetualPrice: null,
        isPerpetual: null
      },
      transferData: {
        allowType: [],
        authorizationStartTime: today(),
        authorizationEndTime: null,
        allowRegion: null,
        pricePerDay: null,
        perpetualPrice: null,
        isPerpetual: null
      },
      // 分发时间辅助信息
      auTime: '',
      trTime: '',
      options1: {
        shortcuts: [
          {
            text: '1星期',
            value () {
              const date = new Date()
              date.setDate(date.getDate() + 7)
              return date
            }
          },
          {
            text: '1个月',
            value () {
              const date = new Date()
              date.setDate(date.getDate() + 30)
              return date
            }
          },
          {
            text: '1年',
            value () {
              const date = new Date()
              date.setDate(date.getDate() + 365)
              return date
            }
          }
        ]
      },
      options2: {
        shortcuts: [
          {
            text: '1星期',
            value () {
              const date = new Date()
              date.setDate(date.getDate() + 7)
              return date
            }
          },
          {
            text: '1个月',
            value () {
              const date = new Date()
              date.setDate(date.getDate() + 30)
              return date
            }
          },
          {
            text: '1年',
            value () {
              const date = new Date()
              date.setDate(date.getDate() + 365)
              return date
            }
          }
        ]
      },
      tableColumns: [
        {
          title: '作品名称',
          key: 'musicName',
          width: 150,
          resizable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '注册时间',
          key: 'uploadTime',
          width: 150,
          resizable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '版权注册号',
          key: 'copyrightRegistrationNumber',
          width: 150,
          resizable: true,
          sortable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '审核情况',
          key: 'validStatus',
          width: 100,
          resizable: true,
          ellipsis: true,
          tooltip: true
        },
        {
          title: '累计收益',
          key: 'earnings',
          sortable: true,
          width: 200,
          resizable: true,
          ellipsis: true,
          tooltip: true,
          render: (h) => {
            return h('Tooltip', {}, '平台上出售的收益的70%\n分发商出售的收益的70%')
          }
        },
        {
          title: '操作',
          key: 'operation',
          ellipsis: true,
          tooltip: true,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '撤销'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '电子凭证'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.publish(params.index)
                  }
                }
              }, '发布'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '查看授权信息'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '查看合约条款'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.show(params.index)
                  }
                }
              }, '查看商品发布')
            ])
          }
        }
      ],
      uploadedMusic: []
    }
  },
  created () {
    this.$nextTick(() => {
      this.$get('/music/getUploadedMusic/1/10').then(res => {
        if (res.code === 20000) {
          // 修改对象里面的数据不属于修改对象，因为对象对应的地址没有发生变化
          const uploadedMusic = res.data.list
          for (let i = 0; i < uploadedMusic.length; i++) {
            const item = uploadedMusic[i]
            if (item.validStatus === 0) {
              item.validStatus = '待审核'
            } else if (item.validStatus === 1) {
              item.validStatus = '已通过'
            } else {
              item.validStatus = '已过期'
            }
            if (item.uploadTime !== null && item.uploadTime.length > 10) {
              item.uploadTime = item.uploadTime.slice(0, 10)
            }
            uploadedMusic[i] = item
          }
          this.uploadedMusic = uploadedMusic
        } else {
          this.$Notice.error({
            title: '获取上传的音乐信息出现问题',
            desc: res.message
          })
        }
      })
    })
  },
  methods: {
    changePage () {
      // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
      this.tableData = this.tableData + []
    },
    exportData (type) {
      if (type === 1) {
        this.$refs.table.exportCsv({
          filename: 'The original data'
        })
      } else if (type === 2) {
        this.$refs.table.exportCsv({
          filename: 'Sorting and filtering data',
          original: false
        })
      } else if (type === 3) {
        this.$refs.table.exportCsv({
          filename: 'Custom data',
          columns: this.tableColumns.filter((col, index) => index < 4),
          data: this.tableData.filter((data, index) => index < 4)
        })
      }
    },
    show (index) {
      this.$Modal.info({
        title: '音乐信息',
        content: `作品名称：${this.uploadedMusic[index].musicName}<br>注册时间：${this.uploadedMusic[index].uploadTime}`
      })
    },
    remove (index) {
      this.uploadedMusic.splice(index, 1)
    },
    publish (index) {
      this.publishState = true
      this.applyIndex = index
    },
    apply () {
      if (this.type === 0) {
        this.authorizeData.type = this.type
        this.authorizeData.musicId = this.uploadedMusic[this.applyIndex].musicId
        this.$postApplicationJson('/musicPermission/addPermission', this.authorizeData).then(res => {
          if (res.code === 20000) {
            this.$Notice.success({
              title: '发布成功'
            })
          } else {
            this.$Notice.error({
              title: '发布失败',
              desc: res.message
            })
          }
        })
      } else {
        this.transferData.type = this.type
        this.transferData.musicId = this.uploadedMusic[this.applyIndex].musicId
        this.$postApplicationJson('/musicPermission/addTransfer', this.transferData).then(res => {
          if (res.code === 20000) {
            this.$Notice.success({
              title: '发布成功'
            })
          } else {
            this.$Notice.error({
              title: '发布失败',
              desc: res.message
            })
          }
        })
      }
    },
    reset () {
      this.$refs.formInfo.resetFields()
      // default to let modal = false
      // 点击取消的话执行了resetFields方法，会清空选择的信息然后关闭
      // 直接右上角x掉的话只是令modal = false
    }
  }
}
</script>

<style scoped>

</style>
